<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		body{
			margin: 0px;
			padding: 0px;
			width: 100%;
			height: 100%;
		}
		.div{
			width:100px;
			height: 100px;
			/* background: rgba(0,128,0,0.5) no-repeat center center ;
			background-size: 50% 50%; */

			/*background-color: green;
		background-image: url(药水哥.jpg);
		background-size: 50% 50%;
		background-repeat: no-repeat;
		background-position: center;*/
		/*background-position: right top bottom left center; */
				color: rgba(221,38,40,1) ;
		text-align: -moz-center;
		line-height: 100px;
		vertical-align: middle;
		text-decoration:line-through;
		/* text-decoration: none; */
			/* font-size:24px;
			font-style:oblique;
			font-family: "bodoni mt black";
			font-weight: bold; */
			font: oblique bold 24px "bodoni mt black" ;
			
		}
		.a:link{
			color: black;
		}
	.a:hover{
		color: pink;
	}
	.a:active{
		color: yellow;
	}
	.a:visited{
		color: green;
	}
	a{
		text-decoration: none;
	}
	.ul{
		width: 100%;
		height: 33px;
		background-color: #e3e4e5;
	}
	.ul li{
		display: inline-block;
		font: 11px;
		font-family: "microsoft yahei";
		color: #a3a3a3;
		line-height: 33px;
		vertical-align: middle;	
	}
	ul,li{
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.ul li:hover{
		cursor: pointer;
		color: #e1241c;
	}
	.ul .span{
		    overflow: hidden;
		    margin: 15px 7px 10px;
		    width: 1px;
		    height: 13px;
		    background-color: #ccc;
	}
	table,th,td{
		border: 1px solid #C9C9C9;
		margin: 0px;
		padding: 0px;
	}
	table{
		border-collapse: collapse;
		width: 100%;
	}
	table th,td{
		height: 50px;
		text-align: center;
	}
	table th{
		background-color: #E3E4E5;
	}
	.div2{
		width: 100px;
		height: 100px;
		border: 1px dotted #C9C9C9;
	}
	.padding{
		/* padding:10px; */
		/* padding: 10px 20px; 垂直水平方向 水平方向 */
		/* padding: 10px 20px 30px;上 左右 下 */
		/* padding:10px 20px 30px 40px;上 右 下 左 */
		/* 顺时针方向 */
		width: 150px;
		height: 150px;
		background: pink;
	}
	.div-1{
		width: 150px;
		height: 150px;
		background: red;
		margin-top: 50px;
		/* margin-bottom: 30px; */
		/* padding-top: 1px; */
		/* border: 1px solid pink; */
		
		/* 嵌套两个块级元素，如果父元素没有设置上内边距或者边框嵌套的元素设置上外边距就会出现合并的问题 */
	}
	.div-2,.box{
		width: 90px;
		height: 90px;
		background: blue;
		margin-top: 20px;
	}
	.box{
		padding: 30px;
		box-sizing: border-box;
	}
	</style>
	<body>
		<div class="div">死gay佬</div>
		<a href="#" class="a">我是邓泽的爸爸</a>
		<ul class="ul">
			<li>首页</li>
			<li>个人博客</li>
			<li>个人相册</li>
			<li>个人中心</li>
		</ul>
		<table>
			<thead>
				<tr>
					<th>姓名</th>
					<th>性别</th>
					<th>手机号</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>diao</td>
					<td>giao</td>
					<td>ding</td>
				</tr>
			<tr>
				<td>diao1</td>
				<td>giao2</td>
				<td>ding3</td>
			</tr>
			<tr>
				<td>diao11</td>
				<td>giao22</td>
				<td>ding33</td>
			</tr>
			<div class="div2"></div>
			<div class="padding">
				
			</div>
			<div class="div-1">
				<div class="div-2"></div>
			</div>
<!-- 盒子的大小
 空间大小：width+padding+border+margin
 实际大小：width+padding+border-->
 <div class="box">我是盒子模型</div>
			</tbody>
		</table>
	</body>
</html>
